<template>
  <div class="page_main">
    <div class="left_box">
      <div class="real_time_box">
        <div class="box_title">实时统计</div>
        <div class="real_content">
          <div class="num_box">
            <div class="label">人数</div>
            <div class="value">
              <div class="num" v-for="(item, index) in statistics.person" :key="index">{{ item }}</div>
              <!-- <div class="num">0</div>
              <div class="num">9</div>
              <div class="num">9</div> -->
            </div>
          </div>
          <div class="num_box">
            <div class="label">搜索人次</div>
            <div class="value">
              <div class="num" v-for="(item, index) in statistics.search" :key="index"> {{ item }}</div>
              <!-- <div class="num">0</div>
              <div class="num">9</div>
              <div class="num">9</div>
              <div class="num">8</div>
              <div class="num">4</div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="use_rate_box">
        <div class="box_title">加速卡24小时利用率</div>
        <div class="chart_box">
          <div class="left">
            <div class="list">
              <div class="list_label">浏览量　　</div>
              <div class="list_num"> {{ pageResult.useratio.pageView }}</div>
              <img class="icon" src="@/assets/arrow.png" alt="" v-if="pageResult.useratio.pageViewState == 0">
              <img class="icon" src="@/assets/arrow.png" alt="" v-else>

              <div class="list_rate">{{ pageResult.useratio.pageViewRatio }}</div>
            </div>
            <div class="list">
              <div class="list_label">浏览量分流</div>
              <div class="list_num">{{ pageResult.useratio.diversion }}</div>
              <img class="icon" src="@/assets/arrow.png" alt="">
              <div class="list_rate">{{ pageResult.useratio.diversionRatio }}</div>
            </div>
            <div class="list">
              <div class="list_label">下载量　　</div>
              <div class="list_num">{{ pageResult.useratio.download }}</div>
              <img class="icon" src="@/assets/arrow.png" alt="">
              <div class="list_rate">{{ pageResult.useratio.downloadRatio }}</div>
            </div>
            <div class="list">
              <div class="list_label">搜索次数　</div>
              <div class="list_num">{{ pageResult.useratio.visitTimes }}</div>
              <img class="icon" src="@/assets/arrow.png" alt="">
              <div class="list_rate"> {{ pageResult.useratio.visitTimesRatio }}</div>
            </div>
          </div>
          <div ref="charts1" class="right"></div>
        </div>
      </div>
      <div class="fix_class_box">
        <div class="fix_class">
          <div class="box_title">累计处理</div>
          <div class="fix_class_content">
            <div class="list">
              <div class="label">数据显示</div>
              <div class="value">
                <div class="num"> {{ cumulProc[0].value }}</div>
                <div class="desc">已处理（{{ cumulProc[0].name }}）</div>
              </div>
            </div>
            <div class="list">
              <div class="label">数据显示</div>
              <div class="value">
                <div class="num"> {{ cumulProc[1].value }}</div>
                <div class="desc">已处理（{{ cumulProc[1].name }}）</div>
              </div>
            </div>
            <div class="list">
              <div class="label">数据显示</div>
              <div class="value">
                <div class="num"> {{ cumulProc[2].value }}</div>
                <div class="desc">已处理（{{ cumulProc[2].name }}）</div>
              </div>
            </div>
          </div>
        </div>
        <div class="fix_class">
          <div class="box_title">行业分类</div>
          <div ref="charts2" class="fix_class_content"></div>
        </div>
      </div>
      <div class="warn_info_box">
        <div class="box_title">报警信息</div>
        <div class="warn_box">
          <div class="warn_list">接口编号</div>
          <div class="warn_list">所属类目</div>
          <div class="warn_list">通信速率</div>
          <div class="warn_list">IP地址</div>
          <div class="warn_list">接口名</div>
          <div class="warn_list">是否异常</div>
        </div>
        <div class="swiper_box">
          <div class="swiper-wrapper">
            <div class="info_box swiper-slide" v-for="(item, index) in altermsg" :key="index" :a="item">
              <div class="info_list">{{ item.code }}</div>
              <div class="info_list">{{ item.type }}</div>
              <div class="info_list">{{ item.rate }}</div>
              <div class="info_list">{{ item.ip }}</div>
              <div class="info_list">{{ item.name }}</div>
              <div class="info_list normal">{{ item.exception }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="center_box">
      <div class="real_monitoring_box">
        <div class="box_title">实时统计</div>
        <div class="monitoring_charts">
          <div ref="charts3" class="left"></div>
          <div class="right">
            <div class="value">当前峰值：<span>{{ pageResult.monitoring.peak }}/s</span></div>
            <div class="value">当前谷值：<span>{{ pageResult.monitoring.valley }}/s</span></div>
          </div>
        </div>
      </div>
      <div class="word_cloud_box">
        <div class="box_title">词云统计</div>
        <div ref="wordCloud" class="cloud_box"></div>
      </div>
      <div class="user_info_box">
        <div class="box_title">用户画像</div>
        <div class="user_charts">
          <div class="left">
            <div class="list">
              <div class="label">总人数</div>
              <div class="value_box">
                <div style="min-width: 150px;display: flex;">
                  <div class="num" v-for="(item, index) in useportrait.man">{{ item }}</div>
                </div>

                <!-- <div class="num">0</div>
                <div class="num">9</div>
                <div class="num">9</div>
                <div class="num">9</div>
                <div class="num">9</div> -->
                <div class="desc">
                  同比增长<span>{{ pageResult.useportrait.manRatio }}</span>
                </div>
              </div>
            </div>
            <div class="list">
              <div class="label">总人数</div>
              <div class="value_box">
                <div style="min-width: 150px;display: flex;">
                  <div class="num" v-for="(item, index) in useportrait.woman">{{ item }}</div>
                </div>

                <!-- <div class="num">0</div>
                <div class="num">9</div>
                <div class="num">9</div>
                <div class="num">9</div>
                <div class="num">9</div> -->
                <div class="desc">
                  同比增长<span>{{ pageResult.useportrait.womanRatio }}</span>
                </div>
              </div>
            </div>
            <div class="list">
              <div class="label">总人数</div>
              <div class="value_box">
                <div style="min-width: 150px;display: flex;">
                  <div class="num" v-for="(item, index) in useportrait.total">{{ item }}</div>
                </div>

                <!-- <div class="num">0</div>
                <div class="num">9</div>
                <div class="num">9</div>
                <div class="num">9</div>
                <div class="num">9</div> -->
                <div class="desc">
                  同比增长<span>{{ pageResult.useportrait.totalRatio }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <div ref="charts4" class="right_charts"></div>
            <div ref="charts5" class="right_charts"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="right_box">
      <div class="charts_box">
        <div class="box_title">上传率</div>
        <div class="charts_content">
          <div ref="charts6" class="charts_list"></div>
          <div class="charts_list">
            <div class="list_text">文本：<span>{{ pageResult.upload.wenben }}</span></div>
            <div class="list_text">数量：<span>{{ pageResult.upload.num }}</span></div>
            <div class="list_text">平均：<span>{{ pageResult.upload.avgnum }}</span></div>
          </div>
        </div>
      </div>
      <div class="charts_box">
        <div class="box_title">下载率</div>
        <div class="charts_content">
          <div ref="charts7" class="charts_list"></div>
          <div class="charts_list">
            <div class="list_text">文本：<span>{{ pageResult.download.wenben != undefined ? pageResult.download.wenben :
                '0' }}</span></div>
            <div class="list_text">数量：<span>{{ pageResult.download.num != undefined ? pageResult.download.num : '0'
                }}</span></div>
            <div class="list_text">平均：<span>{{ pageResult.download.avgnum != undefined ? pageResult.download.avgnum :
                '0' }}</span></div>
          </div>
        </div>
      </div>
      <div class="charts_box">
        <div class="box_title">创新率</div>
        <div class="charts_content">
          <div ref="charts8" class="charts_list"></div>
          <div class="charts_list">
            <div class="list_text">文本：<span>{{ pageResult.innovate.wenben }}</span></div>
            <div class="list_text">数量：<span>{{ pageResult.innovate.num }}</span></div>
            <div class="list_text">平均：<span>{{ pageResult.innovate.avgnum }}</span></div>
          </div>
        </div>
      </div>
      <div class="charts_box">
        <div class="box_title">失败率</div>
        <div class="charts_content">
          <div ref="charts9" class="charts_list"></div>
          <div class="charts_list">
            <div class="list_text">文本：<span>{{ pageResult.fail.wenben != undefined ? pageResult.fail.wenben : '0'
                }}</span></div>
            <div class="list_text">数量：<span>{{ pageResult.fail.num != undefined ? pageResult.fail.num : '0' }}</span>
            </div>
            <div class="list_text">平均：<span>{{ pageResult.fail.avgnum != undefined ? pageResult.fail.avgnum : '0'
                }}</span></div>
          </div>
        </div>
      </div>
      <div class="charts_box">
        <div class="box_title">完成率</div>
        <div class="charts_content">
          <div ref="charts10" class="charts_list"></div>
          <div class="charts_list">
            <div class="list_text">文本：<span>{{ pageResult.finsh.wenben }}</span></div>
            <div class="list_text">数量：<span>{{ pageResult.finsh.num }}</span></div>
            <div class="list_text">平均：<span>{{ pageResult.finsh.avgnum }}</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper' // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
import * as echarts from 'echarts';
import 'echarts-wordcloud';

import api from "@/utils/api/index.js";

export default {
  name: 'ALStation',

  data() {
    return {
      timer: null,
      wordList: [
        { name: '精简增效', value: 10 },
        { name: '甲级机构', value: 20 },
        { name: '保证', value: 30 },
        { name: '扁平化', value: 40 },
        { name: '团队', value: 50 },
        { name: '聚合力', value: 60 },
        { name: '高服务', value: 70 },
        { name: '项目', value: 80 },
        { name: '全司', value: 90 },
        { name: '效益', value: 100 },
        { name: '保证', value: 110 },
        { name: '工作环境', value: 120 },
        { name: '薪酬', value: 130 },
        { name: '股东效益', value: 140 },
        { name: '市场营销力', value: 150 },
        { name: '简架构', value: 160 },
        { name: '透明化', value: 170 },
        { name: '领导', value: 180 },
        { name: '强品质', value: 190 },
        { name: '市场拓展', value: 200 },
        { name: '经理制', value: 210 },
        { name: '管理效益', value: 220 },
        { name: '精益求精', value: 230 },
        { name: '透明', value: 240 },
      ],
      myChart1: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      myChart5: null,
      myChart6: null,
      myChart7: null,
      myChart8: null,
      myChart9: null,
      myChart10: null,
      statistics: {
        person: [0],
        search: [0],
      },
      useportrait: {
        man: [0],
        total: [0],
        woman: [0],
      },
      pageResult: {
        useratio: {
          pageView: 0,
          pageViewRatio: 0,
          pageViewState: 0,
          diversion: 0,
          diversionRatio: 0,
          diversionState: 0,
          visitTimes: 0,
          visitTimesRatio: 0,
          visitTimesState: 0,
          download: 0,
          downloadRatio: 0,
          downloadState: 0,
        },
        monitoring: {
          peak: 0,
          valley: 0
        },

        wordcloud: [],
        useportrait: {
          man: 0,
          manFlag: 0,
          manRatio: 0,
          max: 0,
          min: 0,
          total: 0,
          totalFlag: 0,
          totalRatio: 0,
          woman: 0,
          womanFlag: 0,
          womanRatio: 0
        },
        upload: {
          wenben: 0,
          avgnum: 0,
          num: 0,
          percentage: '0%'
        },
        fail: {
          wenben: 0,
          avgnum: 0,
          num: 0,
          percentage: '0%'
        },
        innovate: {
          wenben: 0,
          avgnum: 0,
          num: 0,
          percentage: '0%'
        },
        download: {
          wenben: 0,
          avgnum: 0,
          num: 0,
          percentage: '0%'
        },
        finsh: {
          wenben: 0,
          avgnum: 0,
          num: 0,
          percentage: '0%'
        },
      },
      cumulProc: [{
        name: " ",
        value: 0
      }, {
        name: " ",
        value: 0
      }, {
        name: " ",
        value: 0
      }],
      altermsg: [],

    }
  },
  mounted() {

    // this.initWordCloud()
    // this.initCharts1()
    // this.initCharts2()
    // this.initCharts3()
    // this.initCharts4()
    // this.initCharts5()
    // this.initCharts6()
    // this.initCharts7()
    // this.initCharts8()
    // this.initCharts9()
    // this.initCharts10()
    this.initCharts()
  },
  beforeDestroy() {
    this.clearData();
  },

  methods: {
    initCharts() {
      this.myChart1 = echarts.init(this.$refs.charts1)
      this.myChart2 = echarts.init(this.$refs.charts2)
      this.myChart3 = echarts.init(this.$refs.charts3)
      this.myChart4 = echarts.init(this.$refs.charts4)
      this.myChart5 = echarts.init(this.$refs.charts5)
      this.myChart6 = echarts.init(this.$refs.charts6)
      this.myChart7 = echarts.init(this.$refs.charts7)
      this.myChart8 = echarts.init(this.$refs.charts8)
      this.myChart9 = echarts.init(this.$refs.charts9)
      this.myChart10 = echarts.init(this.$refs.charts10)
      this.getData()
      this.switper()
    },
    /**
   * 获取数据
   */
    async getData() {
      var that = this;
      await api.getAI({}).then(({ data }) => {
        if (data.code == 200) {
          console.log("AI", data);
          that.pageResult = data.result
          that.setData(data.result);
        }
      });
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = () => {
        this.getData();
        // this.getMock()
      };
      this.timer = setInterval(
        looper,
        this.$store.state.echartsAutoTime
      );

    },
    clearData() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
    setData(result) {
      var that = this
      //词云
      if (result.wordcloud) {
        that.wordList = []
        result.wordcloud.forEach((item) => {
          var itemValue = {
            name: item.name,
            value: that.getRandomInt(100, 300)
          }
          that.wordList.push(itemValue)
        })
        that.initWordCloud()
      }
      //实时统计 数字处理
      if (result.statistics) {
        var person = (result.statistics.person).toString().split('')
        var search = result.statistics.search.toFixed(2).toString().split('')
        this.statistics.person = person
        this.statistics.search = search
      }
      //加速卡24小时利用率 折线数据处理
      if (result.useratioline) {
        var datax = []
        var datay = []
        result.useratioline.forEach((item) => {
          datax.push(item.name)
          datay.push(item.value)
        })
        that.initCharts1(datax, datay)
      }
      //累计处理
      if (result.cumulProc) {
        that.cumulProc = result.cumulProc
      }
      //行业分类 数据处理
      if (result.industryClass) {
        var data = [];
        result.industryClass.forEach((item) => {
          var itemData = {}
          itemData = {
            name: item.name,
            value: item.value,
          }
          data.push(itemData)
        })
        that.initCharts2(data)

      }
      if (result.altermsg) {
        that.altermsg = result.altermsg
        that.$nextTick(() => {
          that.initSwiper()
        })

      }
      //处理实时监测pie
      if (result.monitoring.percentage) {
        var percentage = result.monitoring.percentage.substring(0, result.monitoring.percentage.length - 1)
        that.initCharts3(percentage)

      }
      //用户画像处理
      if (result.useportrait) {
        var man = (result.useportrait.man).toString().split('')
        var woman = result.useportrait.woman.toString().split('')
        var total = result.useportrait.total.toString().split('')
        that.useportrait.man = man
        that.useportrait.woman = woman
        that.useportrait.total = total
      }

      var min = result.useportrait.min
      var max = result.useportrait.max
      var man_value = result.useportrait.value1
      var wman_value = result.useportrait.value2
      that.initCharts4(min, max, man_value)
      that.initCharts5(min, max, wman_value)

      //上传率
      if (result.upload.percentage) {
        var percentage = result.upload.percentage.substring(0, result.upload.percentage.length - 1)
        that.initCharts6(percentage)
      }
      //下载率
      if (result.download.percentage) {
        var percentage = result.download.percentage.substring(0, result.download.percentage.length - 1)
        that.initCharts7(percentage)
      }
      //创新率
      if (result.innovate.percentage) {
        var percentage = result.innovate.percentage.substring(0, result.innovate.percentage.length - 1)
        that.initCharts8(percentage)
      }
      //失败率
      if (result.fail.percentage) {
        var percentage = result.fail.percentage.substring(0, result.fail.percentage.length - 1)
        that.initCharts9(percentage)
      }
      //完成率
      if (result.finsh.percentage) {
        var percentage = result.finsh.percentage.substring(0, result.finsh.percentage.length - 1)
        that.initCharts10(percentage)
      }





    },

    getRandomInt(min, max) {
      min = Math.ceil(min); // 确保min是整数
      max = Math.floor(max); // 确保max是整数
      return Math.floor(Math.random() * (max - min + 1)) + min; // 返回介于min和max之间的整数
    },
 
    initSwiper() {
      new Swiper(".swiper_box", {
        slidesPerView: '5',
        loop: true, // 循环模式选项
        direction: 'vertical', // 垂直切换选项
        autoplay: {
          delay: 1500,
          disableOnInteraction: false
        },//可选选项，自动滑动
        spaceBetween: 0
      })
    },
    initWordCloud() {
      const dom = this.$refs.wordCloud
      const myChart = echarts.init(dom)
      let option = {
        tooltip: {
          show: true, // 是否显示提示信息
          position: 'top',
          textStyle: {
            fontSize: 18,
          },
        },
        series: [
          {
            type: 'wordCloud',
            // 形状 circle 圆，cardioid  心， diamond 菱形，
            // triangle-forward 、triangle 三角，star五角星
            shape: 'star',
            // 自定义图形
            // maskImage: maskImage,
            // 文字显示位置
            left: 'center',
            top: 'center',
            width: '90%',
            height: '90%',
            right: null,
            bottom: null,
            // 字体大小范围 px
            sizeRange: [8, 30],
            // 文字旋转角度范围 [-90,90]
            rotationRange: [-90, 90],
            // 旋转步值
            rotationStep: 30,
            //网格的大小(以像素为单位)，用于标记画布的可用性
            //网格大小越大，单词之间的间距越大。
            gridSize: 16,
            // 是否渲染超出画布的文字, false-则文字若超出画布该项都不显示
            drawOutOfBound: false,
            // If perform layout animation.
            // NOTE disable it will lead to UI blocking when there is lots of words.
            layoutAnimation: false,
            // 文字样式
            textStyle: {
              fontFamily: 'sans-serif',
              fontWeight: 'bold',
              // 颜色：Color can be a callback function or a color string
              // color: (itemData) => {
              color: () => {
                // 按比例计算透明度 0-1
                // let opacity = itemData.value / this.maxValue;
                // Random color ex: rgba(0,0,0,1)
                const colors = ['#2CB9D2', '#028CF9', '#7DCBD9', '#82B8D3', '#ffffff'];
                const randomIndex = Math.floor(Math.random() * colors.length);
                return colors[randomIndex]
              },
            },
            // 强调样式
            emphasis: {
              focus: 'self',
              textStyle: {
                textShadowBlur: 6,
                textShadowColor: '#666',
              },
            },
            // 数据 格式 [{ name: '蛋饺', value: 200 },]
            data: this.wordList,
          },
        ],
      };
      // 渲染图表
      myChart.setOption(option);
    },
    initCharts1(datax, datay) {
      var myChart = this.myChart1
      // const dom = this.$refs.charts1
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        grid: {
          left: '10%',
          right: '5%',
          bottom: '20%',
          top: '10%',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: datax,
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          axisLabel: {
            color: '#fff'
          },
          splitLine: {
            lineStyle: {
              color: '#666',
              type: 'dashed'
            }
          }
        },
        series: [{
          data: datay,
          type: 'line',
          smooth: false,  // 平滑曲线
          areaStyle: {   // 阴影区域
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(82, 164, 155, 0.6)' },
              { offset: 1, color: 'rgba(82, 164, 155, 0)' },
            ])
          },
          lineStyle: {
            color: '#52A49B',  // 折线颜色
            width: 2
          },
          itemStyle: {
            color: '#B5FFF7'  // 点的颜色
          },
          symbol: 'circle',  // 不显示点
          label: {
            show: false,
            position: 'top',
            color: '#FFF',
            fontSize: 12,
            formatter: '{c}'  // 显示数值
          }
        }],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#FF5650',
              width: 1
            }
          },
          backgroundColor: 'rgba(0,0,0,0.7)',
          borderColor: '#00D8FF',
          borderWidth: 1,
          textStyle: {
            color: '#FFF'
          },
          formatter: function (params) {
            return params[0].name + '<br/>利用率: ' + params[0].value;
          }
        },
        backgroundColor: 'transparent'  // 背景颜色
      };
      // 设置图表选项并渲染
      myChart.setOption(option);
    },
    initCharts2(data) {
      var myChart = this.myChart2
      // const dom = this.$refs.charts2
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        color: ['#DB4963', '#1B9FA6', '#FFFFFF', '#F0A953', '#52BAE8'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'center',
          right: '10%',
          // left: 'center',
          orient: 'vertical',
          icon: 'rect',
          itemWidth: 8, // 正方形的宽度
          itemHeight: 8, // 正方形的高度
          textStyle: {
            color: '#fff',  // 图例文字颜色为白色
            fontSize: 12,      // 图例文字大小
            fontWeight: 'normal',  // 字体粗细（可选值：'normal', 'bold', 'bolder', 'lighter'）
            fontFamily: 'Arial',   // 字体类型
            lineHeight: 14,        // 设置行高
          },
        },
        series: [

          {
            name: '行业分类',
            type: 'pie',
            radius: ['60%', '90%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 18,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
            // data: [
            //   { value: 1048, name: '制造业', itemStyle: { color: '#DB4963' } },
            //   { value: 735, name: '重点行业', itemStyle: { color: '#1B9FA6' } },
            //   { value: 580, name: '轻工业', itemStyle: { color: '#FFFFFF' } },
            //   { value: 484, name: '建筑业', itemStyle: { color: '#F0A953' } },
            //   { value: 300, name: '运输业', itemStyle: { color: '#52BAE8' } }
            // ]
          }
        ]
      }
      // 设置图表选项并渲染
      myChart.setOption(option);
    },
    initCharts3(percentage) {
      var myChart = this.myChart3
      // const dom = this.$refs.charts3
      // const myChart = echarts.init(dom)
      var colors = [
        '#DB4963',
        '#FCD159',
        '#16FBE9',
        '#FFFFFF'
      ];
      let option = {
        // 鼠标悬浮的提示
        tooltip: {
          formatter: '统计数量 : {c}'
        },
        series: [
          {
            type: 'gauge',
            radius: '100%', // 边框的半径
            min: 0, //最大值
            max: 100, //最小值
            startAngle: 200, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
            endAngle: -20, //仪表盘结束角度
            splitNumber: 4, //仪表盘刻度的分割段数
            center: ['50%', '60%'],
            itemStyle: {
              color: '#000', //颜色
              shadowColor: 'rgba(0,138,255,0.45)', //阴影颜色
              shadowBlur: 10, //图形阴影的模糊大小
              shadowOffsetX: 2, //阴影水平方向上的偏移距离
              shadowOffsetY: 2 //阴影垂直方向上的偏移距离
            },
            progress: {
              show: true, //是否显示进度条
              roundCap: false, //是否在两端显示成圆形
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0.8,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: colors[3] // 0% 处的颜色
                    },
                    {
                      offset: 0.33,
                      color: colors[2] // 25% 处的颜色
                    },
                    {
                      offset: 0.66,
                      color: colors[1] // 50% 处的颜色
                    },
                    {
                      offset: 1,
                      color: colors[0] // 75% 处的颜色
                    },
                  ],
                  global: false
                }
              }
            },
            pointer: {
              show: true, //是否显示指针
              offsetCenter: [0, '10%'],
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#FF4D4F' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#F6A328' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            axisLine: {
              show: true, //是否显示仪表盘轴线
              roundCap: false, //是否在两端显示成圆形
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, '#1A587E']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            axisTick: {
              show: false, //是否显示刻度
              distance: -29,
              lineStyle: {
                color: '#fff', // 刻度线颜色
                width: 1 // 刻度线的粗细（这里设置为4像素）
              }
            },
            splitLine: {
              show: true, //是否显示分隔线
              distance: 1,
              lineStyle: {
                color: '#fff', // 刻度线颜色
                width: 1 // 刻度线的粗细（这里设置为4像素）
              }
            },
            axisLabel: {
              show: true, //是否显示标签
              distance: 10,
              color: '#fff', // 刻度标签颜色
              fontSize: 8 // 标签字体大小
            },
            data: [
              {
                value: percentage,
                name: ''
              }
            ],
            anchor: {
              show: true,
              showAbove: true,
              size: 10,
              itemStyle: {
                borderWidth: 2
              }
            },
            title: {
              fontSize: 12,
              color: '#fff', // 进度数值的颜色
              offsetCenter: ['0%', '27%'] // 调整标题位置
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '55%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      }
      myChart.setOption(option);
    },
    initCharts4(min, max, value) {
      var myChart = this.myChart4
      // const dom = this.$refs.charts4
      // const myChart = echarts.init(dom)
      var colors = [
        '#DB4963',
        '#FCD159',
        '#16FBE9',
        '#FFFFFF'
      ];
      let option = {
        // 鼠标悬浮的提示
        tooltip: {
          formatter: '男士占比率 : {c}'
        },
        series: [
          {
            type: 'gauge',
            radius: '115%', // 边框的半径
            min: min, //最大值
            max: max, //最小值
            startAngle: 200, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
            endAngle: -20, //仪表盘结束角度
            splitNumber: 4, //仪表盘刻度的分割段数
            center: ['50%', '65%'],
            itemStyle: {
              color: '#000', //颜色
              shadowColor: 'rgba(0,138,255,0.45)', //阴影颜色
              shadowBlur: 10, //图形阴影的模糊大小
              shadowOffsetX: 2, //阴影水平方向上的偏移距离
              shadowOffsetY: 2 //阴影垂直方向上的偏移距离
            },
            progress: {
              show: true, //是否显示进度条
              roundCap: false, //是否在两端显示成圆形
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0.8,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: colors[3] // 0% 处的颜色
                    },
                    {
                      offset: 0.33,
                      color: colors[2] // 25% 处的颜色
                    },
                    {
                      offset: 0.66,
                      color: colors[1] // 50% 处的颜色
                    },
                    {
                      offset: 1,
                      color: colors[0] // 75% 处的颜色
                    },
                  ],
                  global: false
                }
              }
            },
            pointer: {
              show: true, //是否显示指针
              offsetCenter: [0, '10%'],
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#FF4D4F' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#F6A328' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            axisLine: {
              show: true, //是否显示仪表盘轴线
              roundCap: false, //是否在两端显示成圆形
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, '#1A587E']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            axisTick: {
              show: false, //是否显示刻度
              distance: -29,
              lineStyle: {
                color: '#fff', // 刻度线颜色
                width: 1 // 刻度线的粗细（这里设置为4像素）
              }
            },
            splitLine: {
              show: true, //是否显示分隔线
              distance: 1,
              lineStyle: {
                color: '#fff', // 刻度线颜色
                width: 1 // 刻度线的粗细（这里设置为4像素）
              }
            },
            axisLabel: {
              show: true, //是否显示标签
              distance: 10,
              color: '#fff', // 刻度标签颜色
              fontSize: 8 // 标签字体大小
            },
            data: [
              {
                value: value,
                name: '男士占比率'
              }
            ],
            anchor: {
              show: true,
              showAbove: true,
              size: 10,
              itemStyle: {
                borderWidth: 2
              }
            },
            title: {
              fontSize: 10,
              color: '#fff', // 进度数值的颜色
              offsetCenter: ['0%', '35%'] // 调整标题位置
            },
            detail: {
              show: false,
            }
          }
        ]
      }
      myChart.setOption(option);
    },
    initCharts5(min, max, value) {
      var myChart = this.myChart5
      // const dom = this.$refs.charts5
      // const myChart = echarts.init(dom)
      var colors = [
        '#DB4963',
        '#FCD159',
        '#16FBE9',
        '#FFFFFF'
      ];
      let option = {
        // 鼠标悬浮的提示
        tooltip: {
          formatter: '女士占比率 : {c}'
        },
        series: [
          {
            type: 'gauge',
            radius: '115%', // 边框的半径
            min: min, //最大值
            max: max, //最小值
            startAngle: 200, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
            endAngle: -20, //仪表盘结束角度
            splitNumber: 4, //仪表盘刻度的分割段数
            center: ['50%', '65%'],
            itemStyle: {
              color: '#000', //颜色
              shadowColor: 'rgba(0,138,255,0.45)', //阴影颜色
              shadowBlur: 10, //图形阴影的模糊大小
              shadowOffsetX: 2, //阴影水平方向上的偏移距离
              shadowOffsetY: 2 //阴影垂直方向上的偏移距离
            },
            progress: {
              show: true, //是否显示进度条
              roundCap: false, //是否在两端显示成圆形
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0.8,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: colors[3] // 0% 处的颜色
                    },
                    {
                      offset: 0.33,
                      color: colors[2] // 25% 处的颜色
                    },
                    {
                      offset: 0.66,
                      color: colors[1] // 50% 处的颜色
                    },
                    {
                      offset: 1,
                      color: colors[0] // 75% 处的颜色
                    },
                  ],
                  global: false
                }
              }
            },
            pointer: {
              show: true, //是否显示指针
              offsetCenter: [0, '10%'],
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#FF4D4F' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#F6A328' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            axisLine: {
              show: true, //是否显示仪表盘轴线
              roundCap: false, //是否在两端显示成圆形
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, '#1A587E']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            axisTick: {
              show: false, //是否显示刻度
              distance: -29,
              lineStyle: {
                color: '#fff', // 刻度线颜色
                width: 1 // 刻度线的粗细（这里设置为4像素）
              }
            },
            splitLine: {
              show: true, //是否显示分隔线
              distance: 1,
              lineStyle: {
                color: '#fff', // 刻度线颜色
                width: 1 // 刻度线的粗细（这里设置为4像素）
              }
            },
            axisLabel: {
              show: true, //是否显示标签
              distance: 10,
              color: '#fff', // 刻度标签颜色
              fontSize: 8 // 标签字体大小
            },
            data: [
              {
                value: value,
                name: '女士占比率'
              }
            ],
            anchor: {
              show: true,
              showAbove: true,
              size: 10,
              itemStyle: {
                borderWidth: 2
              }
            },
            title: {
              fontSize: 10,
              color: '#fff', // 进度数值的颜色
              offsetCenter: ['0%', '35%'] // 调整标题位置
            },
            detail: {
              show: false,
            }
          }
        ]
      }
      myChart.setOption(option);
    },
    initCharts6(percentage) {
      var myChart = this.myChart6
      // const dom = this.$refs.charts6
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        series: [
          {
            type: 'gauge',
            radius: '90%', // 边框的半径
            startAngle: 0,
            endAngle: 360,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: false // 不显示进度条，只作为圆环边框
            },
            axisLine: {
              lineStyle: {
                width: 1, // 边框宽度
                color: [[1, '#00538A']] // 灰色边框
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            detail: {
              show: false // 不显示具体的数值
            }
          },
          // 内层的环形进度条
          {
            type: 'gauge',
            radius: '80%', // 内层环形进度条的半径
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true, // 圆角进度条
              clip: false,
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 1,
                      color: '#DB4963'
                    },
                  ]
                }
              },
            },
            axisLine: {
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, 'transparent']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            data: [
              {
                value: percentage, // 当前进度
                name: '上传率'
              }
            ],
            title: {
              fontSize: 10,
              color: '#30BEF4', // 进度数值的颜色
              offsetCenter: ['0%', '30%'] // 调整标题位置
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts7(percentage) {
      var myChart = this.myChart7
      // const dom = this.$refs.charts7
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        series: [
          {
            type: 'gauge',
            radius: '90%', // 边框的半径
            startAngle: 0,
            endAngle: 360,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: false // 不显示进度条，只作为圆环边框
            },
            axisLine: {
              lineStyle: {
                width: 1, // 边框宽度
                color: [[1, '#00538A']] // 灰色边框
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            detail: {
              show: false // 不显示具体的数值
            }
          },
          // 内层的环形进度条
          {
            type: 'gauge',
            radius: '80%', // 内层环形进度条的半径
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true, // 圆角进度条
              clip: false,
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 1,
                      color: '#1B9FA6'
                    },
                  ]
                }
              },
            },
            axisLine: {
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, 'transparent']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            data: [
              {
                value: percentage, // 当前进度
                name: '下载率'
              }
            ],
            title: {
              fontSize: 10,
              color: '#30BEF4', // 进度数值的颜色
              offsetCenter: ['0%', '30%'] // 调整标题位置
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts8(percentage) {
      var myChart = this.myChart8
      // const dom = this.$refs.charts8
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        series: [
          {
            type: 'gauge',
            radius: '90%', // 边框的半径
            startAngle: 0,
            endAngle: 360,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: false // 不显示进度条，只作为圆环边框
            },
            axisLine: {
              lineStyle: {
                width: 1, // 边框宽度
                color: [[1, '#00538A']] // 灰色边框
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            detail: {
              show: false // 不显示具体的数值
            }
          },
          // 内层的环形进度条
          {
            type: 'gauge',
            radius: '80%', // 内层环形进度条的半径
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true, // 圆角进度条
              clip: false,
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 1,
                      color: '#FCD159'
                    },
                  ]
                }
              },
            },
            axisLine: {
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, 'transparent']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            data: [
              {
                value: percentage, // 当前进度
                name: '创新率'
              }
            ],
            title: {
              fontSize: 10,
              color: '#30BEF4', // 进度数值的颜色
              offsetCenter: ['0%', '30%'] // 调整标题位置
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts9(percentage) {
      var myChart = this.myChart9
      // const dom = this.$refs.charts9
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        series: [
          {
            type: 'gauge',
            radius: '90%', // 边框的半径
            startAngle: 0,
            endAngle: 360,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: false // 不显示进度条，只作为圆环边框
            },
            axisLine: {
              lineStyle: {
                width: 1, // 边框宽度
                color: [[1, '#00538A']] // 灰色边框
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            detail: {
              show: false // 不显示具体的数值
            }
          },
          // 内层的环形进度条
          {
            type: 'gauge',
            radius: '80%', // 内层环形进度条的半径
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true, // 圆角进度条
              clip: false,
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 1,
                      color: '#52BAE8'
                    },
                  ]
                }
              },
            },
            axisLine: {
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, 'transparent']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            data: [
              {
                value: percentage, // 当前进度
                name: '失败率'
              }
            ],
            title: {
              fontSize: 10,
              color: '#30BEF4', // 进度数值的颜色
              offsetCenter: ['0%', '30%'] // 调整标题位置
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts10(percentage) {
      var myChart = this.myChart10
      // const dom = this.$refs.charts10
      // const myChart = echarts.init(dom)
      // 动态生成 X 轴数据
      let option = {
        series: [
          {
            type: 'gauge',
            radius: '90%', // 边框的半径
            startAngle: 0,
            endAngle: 360,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: false // 不显示进度条，只作为圆环边框
            },
            axisLine: {
              lineStyle: {
                width: 1, // 边框宽度
                color: [[1, '#00538A']] // 灰色边框
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            detail: {
              show: false // 不显示具体的数值
            }
          },
          // 内层的环形进度条
          {
            type: 'gauge',
            radius: '80%', // 内层环形进度条的半径
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false // 隐藏指针
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true, // 圆角进度条
              clip: false,
              width: 10, //进度条宽度
              itemStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 1,
                      color: '#FFFFFF'
                    },
                  ]
                }
              },
            },
            axisLine: {
              lineStyle: {
                width: 10, // 环形进度条宽度
                color: [
                  [1, 'transparent']    // 未激活部分的颜色（灰色）
                ] // 进度条颜色
              }
            },
            splitLine: {
              show: false // 不显示刻度线
            },
            axisTick: {
              show: false // 不显示刻度
            },
            axisLabel: {
              show: false // 不显示刻度标签
            },
            data: [
              {
                value: percentage, // 当前进度
                name: '完成率'
              }
            ],
            title: {
              fontSize: 10,
              color: '#30BEF4', // 进度数值的颜色
              offsetCenter: ['0%', '30%'] // 调整标题位置
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%', // 显示进度百分比
              offsetCenter: ['0%', '-10%'], // 调整进度百分比的位置
              color: '#30BEF4', // 进度数值的颜色
              fontWeight: 'normal', // 字体加粗
              fontSize: 14,
            }
          }
        ]
      };
      myChart.setOption(option);
    },
  }
}
</script>
<style scoped lang="scss">
.page_main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  .left_box {
    height: 100%;
    width: 43%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .real_time_box {
      width: 100%;
      height: 14.07%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #022E51;

      .real_content {
        flex: 1;
        width: calc(100% - 80px);
        display: flex;
        align-items: center;
        padding: 0 40px;
        justify-content: space-between;

        .num_box {
          display: flex;
          align-items: center;

          .label {
            font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
            font-weight: 400;
            font-size: 20px;
            color: #30BEF4;
            margin-right: 10px;
          }

          .value {
            display: flex;
            align-items: center;

            .num {
              width: 32px;
              height: 40px;
              margin-left: 10px;
              background: url('@/assets/num-box.png') no-repeat;
              background-size: 100% 100%;
              font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
              font-weight: 400;
              font-size: 30px;
              line-height: 32px;
              text-align: left;
              font-style: normal;
              text-transform: none;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #30BEF4;
            }
          }
        }
      }
    }

    .use_rate_box {
      display: flex;
      height: 25.11%;
      width: 100%;
      flex-direction: column;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;

      .chart_box {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;

        .left {
          width: 40%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-evenly;

          .list {
            margin-left: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 90%;

            .list_label {
              display: flex;
              align-items: center;
              justify-content: center;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 16px;
              color: #FFFFFF;
            }

            .list_num {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 16px;
              color: #30BEF4;
              margin-left: 20px
            }

            .icon {
              width: 14px;
              height: 14px;
              margin-left: 20px
            }

            .list_rate {
              display: flex;
              align-items: center;
              justify-content: center;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 16px;
              color: #30BEF4;
              margin-left: 20px;
            }
          }
        }

        .right {
          flex: 1;
          height: 100%;
        }
      }
    }

    .fix_class_box {
      width: 100%;
      height: 23%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .fix_class {
        background: #022E51;
        width: 49%;
        height: 100%;
        border-radius: 10px 10px 0px 0px;

        .fix_class_content {
          height: calc(100% - 45px);
          display: flex;
          align-items: center;

          .list:nth-child(odd) {
            background: #073B62;

            .label {
              border-bottom: 1px solid #005072;
            }
          }

          //奇数行
          .list:nth-child(even) {
            background: #022E51;

            .label {
              border-bottom: 1px solid #003F5A;
            }
          }

          .list {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;

            .label {
              height: 37.5%;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 14px;
              color: #1A9ACB;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .value {
              flex: 1;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;

              .num {
                font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
                font-weight: 400;
                font-size: 16px;
                color: #30BEF4;
                margin-bottom: 10px;
              }

              .desc {
                font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
                font-weight: 400;
                font-size: 12px;
                color: #00FFF8;
              }
            }
          }
        }
      }
    }

    .warn_info_box {
      height: 29.4%;
      width: 100%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;

      .warn_box {
        width: 100%;
        height: 24px;
        display: flex;
        align-items: center;
        background: rgba(48, 190, 244, 0.1);

        .warn_list {
          flex: 1;
          font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
          font-weight: 400;
          font-size: 14px;
          color: #30BEF4;

        }
      }

      .swiper_box {
        height: calc(100% - 69px);
        width: 100%;
        overflow: hidden;

        // .swiper-wrapper{
        .swiper-wrapper {
          width: 100%;

          .info_box {
            display: flex;
            width: 100%;
            align-items: center;

            .info_list {
              width: calc(100% / 6);
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 14px;
              color: #30BEF4;
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 12px;
              color: #FFFFFF;

              &.warn {
                color: #DB4963;
              }

              &.normal {
                color: #10B27E;
              }
            }
          }
        }
      }
    }
  }

  .center_box {
    height: 100%;
    width: 35.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .real_monitoring_box {
      height: 23.81%;
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;

      .monitoring_charts {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;

        .left {
          flex: 1;
          height: 100%;
        }

        .right {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;

          .value {
            margin-left: 20px;
            width: 153px;
            height: 36px;
            background: url('@/assets/real_value.png') no-repeat;
            background-size: 100% 100%;
            font-weight: 400;
            font-size: 14px;
            color: #1A9ACB;
            display: flex;
            align-items: center;
            padding-left: 20px;

            span {
              color: #30BEF4;
            }
          }
        }
      }
    }

    .word_cloud_box {
      height: 34.2%;
      width: 100%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;
      display: flex;
      flex-direction: column;

      .cloud_box {
        flex: 1;
        width: 100%;
      }
    }

    .user_info_box {
      height: 36.36%;
      width: 100%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .user_charts {
        width: 100%;
        flex: 1;
        display: flex;
        align-items: center;

        .left {
          width: 56%;
          height: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-evenly;

          .list {
            margin-left: 25px;

            .label {
              font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
              font-weight: 400;
              font-size: 16px;
              color: #30BEF4;
              text-align: left;
              margin-bottom: 5px
            }

            .value_box {
              display: flex;
              align-items: flex-end;


              .num {
                width: 32px;
                height: 40px;
                margin-right: 5px;
                background: url('@/assets/num-box.png') no-repeat;
                background-size: 100% 100%;
                font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
                font-weight: 400;
                font-size: 30px;
                line-height: 32px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #30BEF4;
              }

              .desc {
                font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
                font-weight: 400;
                font-size: 16px;
                color: #30BEF4;

                span {
                  color: #DB4963;
                }
              }
            }
          }
        }

        .right {
          width: 44%;
          height: 100%;

          .right_charts {
            width: 100%;
            height: 50%;
          }
        }
      }
    }
  }

  .right_box {
    height: 100%;
    width: 19.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .charts_box {
      height: 17.75%;
      width: 100%;
      background: #022E51;
      border-radius: 10px 10px 0px 0px;
      display: flex;
      flex-direction: column;

      .charts_content {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;

        .charts_list {
          width: 50%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;

          .list_text {
            font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
            font-weight: 400;
            font-size: 12px;
            color: #1A9ACB;
            text-align: left;

            span {
              color: #30BEF4;
            }
          }
        }
      }
    }
  }
}

.box_title {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #003F5A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
  font-weight: 400;
  font-size: 18px;
  box-sizing: border-box;
  color: #1A9ACB;
}
</style>